<template>
  <view class="book">
    <view class="title" v-if="book">
      <text>{{ book.bookEdition + book.bookYear }}</text>
    </view>
    <view class="icon" @click="handleShowLesson()">
      <text>课程分类</text>
      <image
        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/ipad/classification.png"
        mode="widthFix"
      ></image>
    </view>
    <scroll-view scroll-x="true" class="chapter">
      <view class="chapter_container" v-if="chapterList.length > 0">
        <view class="chapter_content">
          <view
            class="chapter_box"
            v-for="(item, index) in chapterList"
            :key="index"
            @click="startLearning(item)"
            :class="{
              complete: index < currentChapterIndex,
              ing: index === currentChapterIndex,
              incomplete: index > currentChapterIndex,
            }"
          >
            <view class="chapter_circle">
              <view class="chapter_text" v-if="index < currentChapterIndex">
                已学
              </view>
              <image
                v-if="index === currentChapterIndex"
                style="width: 93rpx; height: 98rpx"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/book.png"
                mode="scaleToFill"
              />
              <image
                v-if="index > currentChapterIndex"
                style="width: 82rpx; height: 102rpx"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/lock.png"
                mode="scaleToFill"
              />
            </view>
            <view class="chapter_title">{{ item.shortName }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <Tips :show="showTips"></Tips>
    <Lesson
      :show="isShowLesson"
      :module="module"
      @close="handleShowLesson"
      @change="handleChangeLseeon"
    ></Lesson>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    book: {
      type: Object,
      default: () => {},
    },
    chapterList: {
      type: Array,
      default: () => [],
    },
    module: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      currentChapterIndex: 0,
      bookTitle: "",
      startOffsetX: 0,
      endOffsetX: 0,
      unitOffsetX: 0,
      progressWidth: 0,
      isShowLesson: false,
      showTips: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.currentChapterIndex = this.chapterList.findLastIndex(
        (item) => !item.lockFlag
      );
    },
    handleShowLesson() {
      this.isShowLesson = !this.isShowLesson;
    },
    handleChangeLseeon(id) {
      this.$emit("change", id);
    },
    startLearning(item) {
      if (!item.lockFlag) {
        this.$emit("select", item.chapterId);
      } else {
        this.showTips = true;
        setTimeout(() => {
          this.showTips = false;
        }, 2000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./Book.scss";
</style>
